<div class='navbar navbar-fixed-top'>
    <div class="navbar-inner">
        <div class='container-fluid'>
            <a class="brand" href="/">Stalker</a>
            <ul class="nav navbar-nav">
                <li>
                    <a href="{{ request.route_url('view_user', id=logged_in_user.id) }}">Home</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle"
                       data-toggle="dropdown">Studio <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        {% if not studio %}#}
                            {% if has_permission('Create_Studio') %}
                                <li><a href="#">Create Studio</a>
                                </li>
                            {% endif %}
                        {% else %}
                            {% if has_permission('Read_Studio') %}
                                <li>
                                    <a href="{{ request.route_url('view_studio', id=studio.id) }}">{{ studio.name }}</a>
                                </li>
                            {% endif %}
                        {% endif %}
                        {% if has_permission('Create_User') %}
                            <li class="divider"></li>
                            <li><a class=""
                                   data-target="#dialog_template"
                                   data-toggle="modal"
                                   data-keyboard=false
                                   href='{{ request.route_url('create_user_dialog', _query={'came_from': request.current_route_path()} ) }}'>New
                                User
                            </a>
                            </li>
                        {% endif %}
                        {% if has_permission('Create_Department') %}
                            <li><a class=""
                                   data-target="#dialog_template"
                                   data-toggle="modal"
                                   data-keyboard=false
                                   href='{{ request.route_url('create_department_dialog', _query={'came_from': request.current_route_path()}) }}'>New
                                Department
                            </a>

                            </li>
                        {% endif %}
                        {% if has_permission('Create_Group') %}
                            <li><a class=""
                                   data-target="#dialog_template"
                                   data-toggle="modal"
                                   data-keyboard=false
                                   href='{{ request.route_url('create_group_dialog', _query={'came_from': request.current_route_path()}) }}'>New
                                Group
                            </a>
                                {#                    <a href="/groups/-1/create/dialog">New Group</a>#}
                            </li>
                        {% endif %}
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle"
                       data-toggle="dropdown">Crew <b
                            class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu"
                        aria-labelledby="dropdownMenu">
                        {% if has_permission('List_User') %}
                            <li>
                                <a href="{{ request.route_url('list_studio_users', id=studio.id) }}">Users</a>
                            </li>
                        {% endif %}
                        {% if has_permission('List_Department') %}
                            <li>
                                <a tabindex="-1"
                                   href="{{ request.route_url('list_studio_departments', id=studio.id) }}">Departments</a>
                            </li>
                        {% endif %}
                        {% if has_permission('List_Group') %}
                            <li>
                                <a tabindex="-1"
                                   href="{{ request.route_url('list_groups') }}">Groups</a>
                            </li>
                        {% endif %}
                    </ul>
                </li>
                {% if has_permission('List_Project') %}
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle"
                           data-toggle="dropdown">Projects <b
                                class="caret"></b></a>
                        <ul class="dropdown-menu">
                            {% for project in projects %}
                                <li>
                                    <a href="{{ request.route_url('view_project', id=project.id) }}">{{ project.name }}</a>
                                </li>
                            {% endfor %}
                            {% if has_permission('Create_Project') %}
                                <li class="divider"></li>
                                <li>
                                    <a href="/projects/-1/create/dialog">New
                                        Project</a>
                                </li>
                            {% endif %}
                        </ul>
                    </li>
                {% endif %}
            </ul>


            <ul class="nav ace-nav pull-right">
                <li id="tasks_of_logged_in_user" class="grey red">
                    <a  href="{{ request.route_path('list_entity_tasks', id=logged_in_user.id) }}">
                        <i class="icon-tasks"></i>
                        <span id="nav_bar_task_count" class="badge badge-grey badge-yellow"></span>
                    </a>

                </li>
                <li id="notifications" class="purple">

                </li>
                <li class="light-blue">
                    <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                        <img id="logged_in_user_avatar" class="nav-user-photo"
                             src="{%- if logged_in_user.thumbnail -%}
                    /{{ logged_in_user.thumbnail.full_path }}
                {%- else -%}
                    {{ request.static_url("stalker_pyramid:static/stalker/images/Placeholder_0.png") }}
                {%- endif -%}">

                        <small>Welcome,</small>
                        {{ logged_in_user.name }}
                        </span>

                        <i class="icon-caret-down"></i>
                    </a>

                    <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-closer">
                        <li>
                            <a href="{{ request.route_url('update_user_dialog', id=logged_in_user.id, mode='update') }}">
                                <i class="icon-cog"></i>
                                Settings
                            </a>
                        </li>

                        <li>
                            <a href="{{ request.route_url('view_user', id=logged_in_user.id) }}">
                                <i class="icon-user"></i>
                                Profile
                            </a>
                        </li>

                        <li class="divider"></li>

                        <li>
                            <a href="/logout">
                                <i class="icon-off"></i>
                                Logout
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>

        </div>
    </div>
</div>

{% raw %}
<script id="tmpl_task_nav_bar_row" type="text/x-dot-template">
    <li>
        <a href="/tasks/{{=it.id }}/view">
            <div class="clearfix">
                <span class="pull-left">{{=it.name }}</span>
            </div>

            <div class="progress progress-mini ">
                <div style="width:{{=it.percent_complete }}%"
                     class="bar"></div>
            </div>
        </a>
    </li>
</script>
{% endraw %}

{% raw %}
<script id="tmpl_notificationRow" type="text/x-dot-template">
    <li>
        <a href="/tickets/{{= it.id }}/view">
            <img src="/{{=it.created_by_thumbnail}}"
                 class="msg-photo"/>
            <span class="msg-body">
                <span class="msg-title">
                    <span class="blue">{{=it.created_by_name }}:</span>
                    {{=it.summary }}
                    </span>
                <span class="msg-time">
                    <i class="icon-time"></i>
                    <span class="date">{{=it.date_updated }}</span>
                </span>
            </span>
        </a>
    </li>
</script>
{% endraw %}


<script type="text/javascript">

    $.getJSON('/users/{{ logged_in_user.id }}/open_tickets/').then(function (data) {
        $(document).ready(function () {
            var notifications = $('#notifications');
            var total_tickets = data.length;

            if (total_tickets < 0) {
                notifications.append('<a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="icon-bell-alt icon-bell light-grey"></i><span class="badge badge-important">0</span></a>');
                return;
            }

            notifications.append('<a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="icon-bell-alt icon-animated-bell"></i><span class="badge badge-important">' + total_tickets + '</span></a>');
            notifications.append('<ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-closer"></ul>');

            var row_template = doT.template($('#tmpl_notificationRow').html());

            $(function () {
                var notifications_list = $('#notifications').find('ul');
                notifications_list.append('<li class="nav-header"><i class="icon-warning-sign"></i>' + total_tickets + '  Tickets</li>');

                var i = 0;
                var limit = Math.min(5, data.length);
                for (i = 0; i < limit; i++) {
                    notifications_list.append(row_template(data[i]));
                }

                notifications_list.append('<li><a href="{{ request.route_path('list_entity_tickets', id=logged_in_user.id) }}">See all tickets<i class="icon-arrow-right"></i></a></li>');
            });

        });
    });

    $.getJSON('/users/{{ logged_in_user.id }}/tasks/count/').then(function (data) {
        $(function(){
            $('#nav_bar_task_count').text(data);
        })
    });

</script>
